import Taro, {Component, Config} from "@tarojs/taro";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {View, Image, Text} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'

import './index.less'

// 生活服务中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: []
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '生活服务中心'})
    this.getAllLifeService()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getAllLifeService() {
    let { LifeServiceStore } = this.props.stores
    LifeServiceStore.getAllLifeService({
      callBack: res => {
        this.setState({
          items: toJS(res.items)
        })
      }
    })
  }

  link(url: string) {
    if(url&&url.includes('http')){
      window.location.href = url
    }else {
      getRuntime().navigateTo(url)
    }
  }

  render() {
    let { items } = this.state
     return (
      <View className='all-life'>
        {items.length>0&&
          items.map(item => {
            return(
              <View key={item.id}>
                <View className='type'>{item.lifeServiceCateGoryName}</View>
                <View className='index-nav'>
                  {
                    item.lifeServicesVO&&item.lifeServicesVO.map(nav => {
                      return(
                        <View className='nav' key={item.id+'_'+nav.id} onClick={this.link.bind(this,nav.url)}>
                          <Image className='nav-icon' src={nav.logoIMG} />
                          <Text className='nav-title'>{nav.name}</Text>
                        </View>
                      )
                    })
                  }
                  {
                    item.lifeServicesVO.length<=0&&<View className='page-none-info'>暂无相关应用~</View>
                  }
                </View>
                <View className='interval' />
              </View>
            )
          })
        }
        {
          items.length<=0&&<View className='page-none-info page-none-info-center'>暂无相关服务应用，敬请期待...</View>
        }
      </View>
    )
  }
}

export default Personnel
